<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>文件列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/admin.css">
    <script src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/pintuer.js"></script>
</head>
<body>
<form method="post" action="${pageContext.request.contextPath}/file/page.do" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 文件列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <li> <a class="button border-main icon-plus-square-o" href="${pageContext.request.contextPath}/file/toAdd.do"> 上传文件</a> </li>
                <li>
                    <input type="text" placeholder="请输入搜索关键字" id="keyWord" name="keyWord" class="input" style="width:250px; line-height:17px;display:inline-block" />
                    <button  class="button border-main icon-search">搜索</button>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th width="10%">文件编号</th>
                <th>原文件名</th>
                <th>文件类型</th>
                <th>上传时间</th>
                <th>文件大小</th>
                <th>文件夹</th>
                <th width="310">操作</th>
            </tr>
            <c:forEach items="${data.list}" var="file">
                <tr>
                    <td>${file.fileId}</td>
                    <td><font color="#00CC99">${file.oldName}</font></td>
                    <td>${file.fileType}</td>
                    <td>
                        <fmt:formatDate value="${file.uploadTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                    </td>
                    <td>${file.fileSize}</td>
                    <td>${file.folderName}</td>
                    <td>
                        <div class="button-group">
                            <a class="button border-main" href="${pageContext.request.contextPath}/file/download.do?fileId=${file.fileId}"><span class="icon-edit"></span> 下载</a>
                            <a class="button border-main" href="${pageContext.request.contextPath}/file/show.do?fileId=${file.fileId}"><span class="icon-anchor"></span> 查看</a>
                            <a class="button border-red" href="javascript:void(0)" onclick="return del(${file.fileId})"><span class="icon-trash-o"></span> 删除</a> </div></td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <p style="margin-top: 10px;"><div id="page" style="position: relative;left: 40%"> </div></p>
</form>
<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['laypage'],function () {
        let laypage = layui.laypage;
        laypage.render({
            elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
            count: ${data.total}, //数据总数，从服务端得到
            limit:5,
            curr:${page},
            theme: '#1E9FFF',
            jump: function(obj, first){
                //首次不执行
                if(first){
                    return false;
                }
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                console.log("点击了页码!!!")
                let page = obj.curr;//点击页码
                let keyWord = $("#keyWord").val();
                location.href = "${pageContext.request.contextPath}/file/page.do?page="+page+"&keyWord="+keyWord;
            }
        });
        //点击页码 实现请求
    })
    
    function del(fileId) {
        if(confirm("您确定要删除吗?")){
            location.href = "${pageContext.request.contextPath}/file/delete.do?fileId="+fileId;
        }
    }
</script>


</body>
</html>